<template>
    <div class="cart">
        <!-- 购物车中商品为空时，显示空提示信息，否则显示购物车列表商品数据 -->
        <van-empty
        image="https://fastly.jsdelivr.net/npm/@vant/assets/custom-empty-image.png"
        image-size="80"
        description="购物车为空，请选购商品！"
        v-if="cart.length === 0"
        />
        <!-- 列表显示时，利用滑动单元格显示商品卡片组件，左滑时显示删除商品的按钮 -->
        <template v-else>
            <van-swipe-cell
            v-for="goods in cart"
            :key="goods.id"
            >
            <van-card
                :price="goods.price"
                :title="goods.title"
                class="goods-card"
            >
            <!-- 自定义商品卡片右下角的商品数量-步进器可修改数量 -->
            <template #num>
                <van-stepper
                :modelValue="goods.amount"
                theme="round" 
                button-size="22" 
                disable-input
                @change="handleAmountChange($event,goods.id)"
                />
            </template>
            <!-- 商品图片前边添加勾选的复选框 -->
            <template #thumb>
            <van-checkbox 
            :modelValue="goods.checked" 
            checked-color="#ee0a24"
            @click="toggle(goods.id)" 
            />

            <div class="van-image" style="width: 88px; height: 100%;">
                <img :src="goods.image" class="van-image__img" style="object-fit: cover;">
            </div>
            </template>
            </van-card>
            <template #right>
                <van-button square 
                text="删除" 
                type="danger" 
                class="delete-button" 
                @click="removeFromCart(goods.id)"
                />
            </template>
            
            </van-swipe-cell>
            <!-- 提交订单栏 -->
            <van-submit-bar :price="totalPrice" button-text="提交订单" @submit=""  @click="handleOrder">
                <van-checkbox
                :modelValue="isAllChecked"
                :indeterminate="isHalfChecked"
                @click="checkAll(!isAllChecked)"
                >全选
                </van-checkbox>
                <template #tip>
                你的收货地址不支持配送, <span @click="">修改地址</span>
                </template>
            </van-submit-bar>
        </template>
    </div>
</template>

<script>
import { mapGetters,mapMutations } from 'vuex'

export default {
    name: 'Cart',
    data() {
        return {
            
        }
    },
    computed: {
        ...mapGetters('shoppingCart',['cart','totalPrice','isAllChecked','isHalfChecked'])
    },
    methods: {
        ...mapMutations('shoppingCart',['removeFromCart','modifyAmount','toggle','checkAll']),
        // 修改商品选购数量
        handleAmountChange(amount,id) {
            this.modifyAmount({id,amount})
        },
        //提交订单
        handleOrder(){
            console.log('提交订单');
            this.$router.push('/order')
        }
    }
}
</script>

<style lang="scss" scoped>
.goods-card {
    margin: 0;
    background-color: white;
}

.delete-button {
    height: 100%;
}

// 深度选择器 - 样式穿透
:deep(.van-card__thumb) {
    width: 120px;
    display: flex;
    justify-content: space-around;
}
.van-submit-bar {
    bottom: 50px;
}


</style>
